/**
 * Created by Administrator on 2017/3/14.
 */
var Tooltip = require('../../../src/libs/tooltip');
var InvestDetail = React.createClass({
    getInitialState:function(){
        return{
            ProDetail:this.props.ProDetail
        }
    },
    //导出PDF文件
    exportPDF:function(){
        //console.log(this.refs.getRealDom);
        this.props.exportPDF.onClick(this.refs.getRealDom.outerHTML);
    },
    setMessage:function(orderStatus,isRefund){
        var msg = {};
        switch (orderStatus){
            case 6:
                msg = {
                    statusText: "处理中"
                };
                break;
            case 70:
                msg = {
                    statusText: "支付失败",
                    tips:"对不起，该订单交易处理失败，请您稍后再试或者咨询：95039"
                };
                break;
            case 60:
                msg = {
                    statusText: "项目流标",
                    status:"",//项目状态
                    money:{//金额
                        key:"流标金额",
                        value:0
                    },
                    time:{//时间
                        key:"投资时间",
                        value:""
                    },
                    tips:""
                };
                if(isRefund){
                    msg.status = "项目流标，已退款";
                    msg.tips = "您的流标资金已退至您投标时绑定的回款账户，请注意查收。如超期未收到退款，请及时联系平台客服。";
                }else{
                    msg.status = "项目流标，未退款";
                    msg.tips = "由于您投资的项目未能成立，您的投标资金已进行退款处理，相关资金最快将在本项目投标结束日后3个工作日内（如遇节假日将顺延）退至您投标时绑定的回款账户，请注意查收。如超期未收到退款，请及时联系银行客服。";
                }
                break;
            case 10:
                msg = {
                    statusText: "项目超募",
                    status:"",//项目状态
                    money:{//金额
                        key:"超募金额",
                        value:0
                    },
                    time:{//时间
                        key:"超募时间",
                        value:""
                    },
                    tips:""
                };
                if(isRefund){
                    msg.status = "项目超募，已退款";
                    msg.tips = "您的超募资金已退至您投标时绑定的回款账户，请注意查收。如超期未收到退款，请及时联系平台客服。";
                }else{
                    msg.status = "项目超募，待退款";
                    msg.tips = "由于您投资的项目已超募，您的投标资金已进行退款处理，相关资金最快将在本项目投标结束日后3个工作日内（如遇节假日将顺延）退至您投标时绑定的回款账户，请注意查收。如超期未收到退款，请及时联系银行客服。";
                }
                break;
            case 20:
                msg = {
                    statusText: "回收完成",
                    status:"已回款",//项目状态
                    money:{//金额
                        key:"回款本金",
                        value:0
                    },
                    earnings:{
                        key:"回款收益",
                        value:0
                    },
                    time:{//时间
                        key:"回款时间",
                        value:""
                    },
                    tips:"您本次投标的本金和收益已支付至您投标时绑定的回款账户并将于1-3个工作日内到账，请注意查收。如超期未收到款项，请及时联系平台客服。"
                };
                break;
            case 30:
                msg = {
                    statusText: "回款中",
                    status:"回款中",//项目状态
                    money:{//金额
                        key:"回款本金",
                        value:0
                    },
                    earnings:{
                        key:"回款收益",
                        value:0
                    },
                    time:{//时间
                        key:"原定回款日",
                        value:""
                    },
                    tips:"您本次投标的本金和收益正在回款中，请耐心等候。"
                };
                break;
            case 40:
                msg.statusText = "计息中";break;
            case 50:
                msg.statusText = "已投标待起息";break;
        }
        return msg;
    },
    render:function(){
        var _this = this;
        var ProDetail = _this.state.ProDetail,
            orderStatus = ProDetail.UserCenterOrderStatus;
        var ProjectMessage = this.setMessage(orderStatus,ProDetail.IsRefund);
        //数字格式化
        var IncomeAmount = UFormatter.formatMoney(Number(ProDetail.IncomeAmount),2),//预期收益
            PayAmount = UFormatter.formatMoney(Number(ProDetail.PayAmount),2),//投资本金
            ProjectAmount = Number(ProDetail.ProjectAmount);//项目规模
        if(ProjectAmount < 10000){
            ProjectAmount = UFormatter.formatMoney(ProjectAmount,2) + "元";
        }else{
            ProjectAmount = UFormatter.formatMoney(ProjectAmount/10000,2) + "万元";
        }

        return(
            <div className="invest-detail">
                <div ref="getRealDom">
                    <h1>
                        {ProDetail.ProjectName}
                        {ProDetail.ProjectType ?
                            ProDetail.IsExclusivePublic ?
                                <Tooltip title="专属项目，需输入项目专属识别码才可投标" className="bg-icon iconfont icon-zhuang tooltip"></Tooltip> :
                                <span className="bg-icon tag tag-zhuang"></span> : ""
                        }
                        {ProDetail.UserCenterOrderStatus ?
                            <span className={"tag " + "tag-red"}>{ProjectMessage.statusText}</span> : ""
                        }
                    </h1>

                    {(orderStatus == 10 || orderStatus == 20 || orderStatus == 30 || orderStatus == 60) ?
                        <div className="failure-tips">
                            <p>
                                项目状态：<span className="fc-main">{ProjectMessage.status}</span><em></em>
                                {ProjectMessage.money.key}：<span className="fc-main">{PayAmount}</span>元<em></em>
                                {ProjectMessage.earnings ?
                                    <span>{ProjectMessage.earnings.key}:<span className="fc-main">{IncomeAmount}</span>元<em></em></span>:""
                                }{/*预期收益=投资总额*年化利率*项目期限/365，保留小数后两位，单位元*/}
                                {ProjectMessage.time.key}：<span className="fc-main">{ProDetail.RepayBegin}</span>
                            </p>
                            <p className="fc-light">{ProjectMessage.tips}</p>
                        </div> :
                        orderStatus == 70 ?
                            <div className="failure-tips">
                                <p className="fc-light">{ProjectMessage.tips}</p>
                            </div> : ""
                    }

                    {(orderStatus == 6 || orderStatus == 50 || orderStatus == 40) ?
                        <div className="money">
                            <ul className="clearfix">
                                <li><p className="fc-main"><b className="fs42">{IncomeAmount}</b>元</p>
                                    <p className="fc-light">预期收益</p></li>
                                <li><p><b>{PayAmount}</b>元</p>
                                    <p className="fc-light">投资本金</p></li>
                            </ul>
                        </div> : ""
                    }

                    <div className="info">
                        <ul className="clearfix">
                            <li><p>{ProDetail.Duration + "天"}</p>
                                <p className="fc-light">投资期限</p></li>
                            <li><p className="fc-main"><b>{ProDetail.InvestmentInterest}</b>%</p>
                                <p className="fc-light">年化利率</p></li>
                            <li><p>{ProjectAmount}</p>
                                <p className="fc-light">项目规模</p></li>
                        </ul>
                    </div>
                    <div className="pro-data">
                        <ul className="clearfix">
                            <li>项目起息日：{ProDetail.ValueBegin}</li>
                            <li>项目到期日：{ProDetail.RepayBegin}</li>
                            <li>还款方式：到期一次性还本付息</li>
                        </ul>
                    </div>
                    <div className="bank-back clearfix">
                        <label className="f-left">回款账户：</label>
                        <div className="input f-left">
                            <span className={"bank-logo "+ProDetail.CallbackAccount.BankLogo}></span>
                            <span>{ProDetail.CallbackAccount.AccountNo}</span>
                        </div>
                    </div>
                </div>
                <span className="angle angle-right-bottom"></span>
            </div>
        )
    }
});

var Root = React.createClass({
    getInitialState:function(){
        return{
            ProDetail:PageDM.ProDetail.value,
            realName:PageDM.realNameInfo.value
        }
    },
    componentDidMount: function(){
        var _this = this;
        var PageDM = window.PageDM;
        UEventHub.emit("pageLoad","hello world!");

        //项目详情
        UEventHub.on(PageDM.ProDetail.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                ProDetail:v
            })
        });
        //个人实名信息
        UEventHub.on(PageDM.realNameInfo.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                realName:v
            })
        });
    },
    render: function () {
        return (
            <div>
                <div className="mod-account container">
                    <div className="account" style={{width:"870px",margin:"0 auto",minHeight:"auto"}}>
                        <InvestDetail url={PageDM.URL} ProDetail={this.state.ProDetail} exportPDF={PageDM.exportPDF} printBtn={PageDM.printBtn}/>
                        <div style={{textAlign:"center",marginTop:"20px"}}>
                            <button id="printBtn" className="ucs-btn ucs-btn-confirm" onClick={PageDM.printBtn.onClick}>打印</button>
                        </div>
                    </div>
                    <div className="clear"></div>
                </div>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));